<!-- 关键词设置 —— 选择默认词头 -->
<template>
  <ele-modal
    width="700px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="选择默认词头"
    @update:visible="updateVisible"
  >
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-bottom: 15px">全选</el-checkbox>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox style="min-width: 100px;margin-bottom: 15px" v-for="city in list" :label="city" :key="city.id">{{city.content}}</el-checkbox>
    </el-checkbox-group>
    <div class="btn-class flex">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button type="primary" size="small" @click="confirm()">确定</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import {accountCode, kuaishouCode} from "@/api/matrixManage/accountList";

  export default {
    name: "prefix",
    props: {
      // 接口查询到的list(总)
      list: Array,
      // 用户输入+选择“词头/尾”的 数据
      oldList: String
    },
    data() {
      return {
        // “添加词头” 弹框是否展示
        visible:false,
        newArray:[],
        // 全选的√ 是否勾选
        checkAll: false,
        checkedCities: [], // 选中的数据
        // 是否全选
        isIndeterminate: false,
        // 原数据 和 实际value，相差
        cha:0
      };
    },
    methods: {
      async show(){
        this.visible=true
        // 赋值
        this.checkedCities= [];
        if(this.oldList){
          this.checkedCities= this.oldList.split`,`;
          console.log("一进入this.checkedCities",this.checkedCities)
          let checkedLength = 0
          for(let i=0;i<this.checkedCities.length;i++){
            for(let j=0;j<this.list.length;j++){
              if(this.list[j].content==this.checkedCities[i]){
                console.log('11111111111111111',this.checkedCities[i])
                this.checkedCities[i]=this.list[j]
                console.log('i',i,'j',j)
                checkedLength=i
              }
            }

          }
          this.cha= this.checkedCities.length - checkedLength
          console.log("this.cha1111111",this.cha,'this.checkedCities.length',this.checkedCities.length,'checkedLength',checkedLength)
          // this.cha=checkedLength < this.checkedCities.length ? this.checkedCities.length - checkedLength : 0
          console.log('this.cha==============',this.cha,'checkedLength',checkedLength,'this.checkedCities.length',this.checkedCities.length)
          console.log('this.checkedCities子组件结束赋值',this.checkedCities,'this.list.length)',this.list.length)
          if(this.checkedCities.length==this.list.length){
            // this.isIndeterminate=true
            this.checkAll=true
          }
        else{
            this.checkAll=false
          }
        }
      },
      // 弹出框 visible
      updateVisible(value) {
        this.visible=value
      },
      // ‘复选框’ 全选
      handleCheckAllChange(val) {
        console.log("全选val",val)
        this.checkedCities = val ? this.list : [];
        this.isIndeterminate = false;

        console.log("this.checkedCities", this.checkedCities)
      },
      // 单个 ‘复选框’ 选择
      handleCheckedCitiesChange(value) {
        this.checkedCities = value
        let checkedCount = this.cha ? value.length-this.cha : value.length;
        this.checkAll = checkedCount === this.list.length ? true : false;
        // 选择的vue>0
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length;
        console.log("this.checkedCount", checkedCount, 'this.list.length', this.list.length,'value',value )
      },
      //取消
      cancel(){
        this.updateVisible(false)
      },
      //确定
      confirm(){
        console.log('this.oldList============',this.oldList)
        if(this.oldList){
          /*
          oldList ： 进入页面的赋值，在父组件里的数据
          checkedCities： ‘选择’总数据
          newArray ： 筛选已选择后的数据(将已有的数据去重）
          如果 newArray 有数据，则用筛选后的数据（代表是有值传递），否则，用所有的数据checkedCities：
          * */
          console.log('this.oldList',this.oldList)
          var array = this.oldList.split`,`;
          console.log("array",array)
          this.newArray = this.checkedCities.filter((item) => !array.some((item2) => item2 === item.content))
          console.log('去除重复后的数组',this.newArray)
        }
        else{
          this.newArray = this.checkedCities
        }

        console.log("确定this.checkedCities=====", this.checkedCities,'newArray',this.newArray)
        // this.newArray = this.newArray.length>0 ? this.newArray : this.checkedCities
        let checkedAll = this.getTextByJs(this.newArray)
        this.$emit('checkedAll', checkedAll ,this.checkedCities,this.list)
        this.cancel()

        /*let checkedAll = this.getTextByJs(this.checkedCities)
        console.log("this.checkedCities",this.checkedCities)
        this.$emit('checkedAll', checkedAll)
        this.cancel()*/
      },
      //用js
      getTextByJs(arr) {
        console.log('进入关联', arr)
        var str = "";
        for (var i = 0; i < arr.length; i++) {
          str += arr[i].content+ ",";
        }
        //去掉最后一个逗号(如果不需要去掉，就不用写)
        /*if (str.length > 0) {
          str = str.substr(0, str.length - 1);
        }*/
        return str;
      }
    }
  };
</script>

<style scoped lang="less">
  .btn-class{
    margin:100px 0 20px
  }
</style>
